<template>
  <div class="RecentlyPlayed">
    <div @click="userinfopush" class="recentlyplayed">
      <span class="iconfont icon-xiangzuo"></span> 最近播放
    </div>
    <div class="song">
      <p>歌曲</p>
      <span>{{ song }}</span>
    </div>
    <div class="PlayAll">
      <i class="iconfont icon-24gf-playCircle"></i>
      <p>播放全部</p>
      <span>({{ song }})</span>
    </div>
    <div class="swiper-container swiper-container-01">
      <div class="swiper-wrapper">
        <div
          class="swiper-slide item"
          v-for="(item, index) in topsong"
          :key="index"
          @click="setId(item.song.id)"
        >
          <p>{{ item.song.name }}</p>
          <p class="songarname">
            {{ item.song.ar[0].name }}&nbsp;-&nbsp;{{ item.song.name }}
          </p>
          <span class="iconfont icon-bofang_o"></span>
        </div>
      </div>
      <div class="swiper-pagination swiper-pagination-01"></div>
    </div>
  </div>
</template>
<script>
import { getUserrecord } from "../../api/recommend";
import Swiper from "swiper";
export default {
  data() {
    return {
      topsong: null,
      song: 0,
    };
  },
  created() {
    getUserrecord({ uid: window.localStorage.uid }).then((data) => {
      this.topsong = data.allData;
      console.log(this.topsong);
      this.song = this.topsong.length;
    });
  },
  methods: {
    setId(id) {
      console.log(id);
      this.$emit("get-play-all-id", this.$route.query.id);
      this.$emit("get-player-id", id);
    },
    userinfopush() {
      this.$router.push("/userinfo");
    },
  },
  mounted() {
    new Swiper(".swiper-container-01", {
      // pagination: '.swiper-pagination-01',
      slidesPerView: 1, //显示个数
      paginationClickable: true,
      observer: true,
      observeParents: true,
      spaceBetween: 5, //div之间间距
    });
  },
};
</script>
<style lang="less">
.RecentlyPlayed {
  width: 100%;
  .recentlyplayed {
    font-size: 20px;
    margin: 5%;
    span {
      font-size: 20px;
    }
  }
  .song {
    display: flex;
    font-size: 14px;
    width: 90%;
    margin: 5% auto;
    span {
      font-size: 8px;
    }
  }
  .PlayAll {
    width: 90%;
    margin: 5% auto;
    display: flex;
    i {
      font-size: 20px;
      color: #fd403b;
    }
    p {
      padding: 0 5px;
    }
    span {
      font-size: 14px;
      color: #afafaf;
    }
  }
  .swiper-container {
    width: 90%;
    margin: 0 auto;
    .swiper-slide {
      position: relative;
      margin: 10px 0;
      .songarname {
        font-size: 12px;
        color: #909090;
      }
      span {
        position: absolute;
        top: 0;
        right: 2%;
        font-size: 35px;
      }
    }
  }
}
</style>